<template>
	<div class="wrap">
		<div class="title">
		<p>换绑手机</p>
		</div>
		<div class="phone">
			<div class="one">
				<img src="../../assets/img/geren/huijuxing.png"/>
				<router-link to="/ziliao01"><p>1.验证原手机号</p></router-link>
			</div>
			<div class="two">
				<img src="../../assets/img/geren/greenjuxing.png"/>
				<p>2.验证新手机号</p>
				
			</div>
			<div class="three">
				<img src="../../assets/img/geren/juxing2.png"/>
				<router-link to="/ziliao03"><p>3.换绑成功</p></router-link>
			</div>
			<!---->
			<input type="text" name="" id="phoneNumber" placeholder="13838383838" />
			<!--验证吗-->
			<div class="yanzheng">
				<input type="text" name="yan" id="yan" placeholder="验证码" />
				<yzm></yzm>
			</div>
			<!---->
			<div class="shenfen">
			<input type="text" name="" id="mima" placeholder="输入密码验证身份" />
			<router-link to="/ziliao03"><button id="tijiao">提交验证</button></router-link>
			<button id="hq">获取验证码</button>
			</div>
			
		</div>
	</div>
</template>

<script>
import yzm from '@/components/gerenzhongxin/yzm'//验证
	export default {
		components: {
			yzm
		},
		methods: {
			apple:function(){
				
			}
		},
		mounted: function() {
		this.apple();
		}

	}
</script>

<style scoped="scoped">
	.wrap {
		width: 1085px;
		height: 625px;
		float: left;
		margin-left: 20px;
		border: 1px solid #e7e7e7;
		margin-bottom: 40px;
	}
	.title{
		width: 1085px;
		height: 57px;
		border-bottom: 1px solid #E7E7E7;
	}
	.title p{
		font-size: 18px;
		line-height: 57px;
		margin-left: 21px;
	}
	.one,.two,.three{
		position: relative;
	}
	.one img{
		position: absolute;
		left: 41px;
		top: 41px;
	}
	.one p{
		position: absolute;
		font-size: 16px;
		/*color: white;*/
		left: 91px;
		top: 52px;
	}
	.two img{
		position: absolute;
		left: 267px;
		top: 41px;
	}
	.two p{
		position: absolute;
		font-size: 16px;
		left: 332px;
		top: 52px;
		color: white;
	}
	.three img{
		position: absolute;
		left: 505px;
		top: 41px;
	}
	.three p{
		position: absolute;
		font-size: 16px;
		left: 597px;
		top: 52px;
	}
	#phoneNumber{
	width: 307px;
	height: 44px;
	background: #f9f9f9;
	border: 1px solid #e5e5e5;
	margin-left: 41px;
	margin-top: 122px;
	text-indent: 0.5em;
	font-size: 16px;
	}
	.yanzheng{
		
	}
	.yanzheng p{
		color: #F08200;
		font-size: 16px;
		float: left;
		margin-left:10px ;
		margin-top: 46px;
	}
	#yan{
		float: left;
		width: 113px;
	height: 44px;
	background: #f9f9f9;
	border: 1px solid #e5e5e5;
	text-indent: 0.5em;
	font-size: 16px;
	margin-left: 41px;
	margin-top: 30px;
	}
	.yanzheng img{
		float: left;
		margin-left: 20px;
		margin-top: 35px;
	}
	.shenfen{
		position: relative;
	}
	#mima{
	width: 307px;
	height: 44px;
	background: #f9f9f9;
	border: 1px solid #e5e5e5;
	text-indent: 0.5em;
	font-size: 16px;
	position: absolute;
	left: 41px;
	/*top: px;*/
	}
	#tijiao{
		position: absolute;
		width: 150px;
		height: 50px;
		background: #F08200;
		color: white;
		font-size: 18px;
		border-radius: 5px;
		left: 41px;
		top: 90px;
	}
	#hq{
		position: absolute;
		color: white;
		background: #498e3d;
		left: 244px;
		top: 7px;
		width: 100px;
		height: 32px;
	}
	.yzm{
		margin-left: 10px;
		margin-top: 32px;
	}
</style>